<template>
  <div class="container" style="height: 100vh;width: 300px;padding: 20px;box-sizing: border-box;width: 100%;">
    <header>
      <MBreadcrumb :item="breadcrumbItem" />
    </header>
    <main>
      <MTitle class="title">
        <template #left>
          产品信息
        </template>
      </MTitle>
      <MList :item="MListItem"></MList>
      <MTitle class="title1">
        <template #left>
          关联标识
        </template>
      </MTitle>
      <MTag v-for="(obj, index) in tagItems" :key="index">{{ obj }}</MTag>
    </main>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue';
import MBreadcrumb from "../components/MBreadcrumb.vue"
import MTitle from "../components/MTitle.vue"
import MList from "../components/MList.vue"
import MTag from "../components/MTag.vue"
import axios from "../axios/axios"
export default {
  name: "ProductInfo",
  components: {
    MBreadcrumb,
    MTitle,
    MList,
    MTag
    //MIcon
  },
  setup() {
    const breadcrumbItem = ref(
      {
        key: "0",
        title: '赋码管理',
        children: {
          key: "0-0",
          title: '产品信息',
        }
      })
    //const userId="12121"
    const MListItem = ref([])
    const tagItems = ref([])
    const params = ref([])
    const userId = ref("")
    onMounted(() => {
      // 获取 URL 参数
      const param = new URLSearchParams(window.location.search);
      params.value = param
      if (param.has('AppId')) {
        var productInfoId = 0
        //console.log("productInfoId", param.get('productInfoId'));

        if (param.get('productInfoId') != null) {
          productInfoId = (Number)(param.get('productInfoId'))
        }
        // axios.get('/userproduct/select?appId=' + param.get('AppId') + "&userId=" + param.get('userId') + "&trainingId=" + param.get('trainingId') + "&productType=" + productType)
        //   .then(response => {
        //   const dataList = []
        //   if (response.data.Data != null) {
        //     const info = JSON.parse(response.data.Data.productinfo)
        //     info.forEach((element, index) => {
        //       dataList.push({
        //         key: index,
        //         field: element.title,
        //         value: element.value
        //       })
        //     });
        //     if (param.get('code') !== null) {
        //       dataList.push({
        //         key: dataList.length,
        //         field: "code",
        //         value: param.get('code')
        //       })
        //     }

        //     MListItem.value = dataList
        //   }

        // })
        axios.get('/userproduct/select?userId=' + param.get('userId')
          + "&id=" + productInfoId).then(response => {
            const dataList = []
            if (response.data.Data != null) {
              const info = JSON.parse(response.data.Data.productinfo)
              info.forEach((element, index) => {
                dataList.push({
                  key: index,
                  field: element.title,
                  value: element.value
                })
              });
              if (param.get('code') !== null) {
                dataList.push({
                  key: dataList.length,
                  field: "code",
                  value: param.get('code')
                })
              }

              MListItem.value = dataList
            }
          })
        if (param.get('code') !== null) {
          axios.get('/association/select?code=' + param.get('code')).then(res => {
            if (res.data.Data !== null) {
              const dataList = res.data.Data.associationcode.split(",")
              tagItems.value = dataList
            } else {
              const dataList = []
              dataList.push(param.get('code'))
              tagItems.value = dataList
            }

          })

        }
        if (param.has('userId')) {
          userId.value = param.get('userId');
        }

      }
    });
    return {
      breadcrumbItem,
      MListItem,
      tagItems
    };
  },
};
</script>

<style scoped>
.title {
  margin-top: 30px;
}

.title1 {
  margin-top: 20px;
}

.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

footer {
  text-align: center;
  height: 10%;
}

main {
  flex: 1;
}
</style>
